<template>
	<div class="evaluate">
		<!-- 评价 -->
		<div class="product-evaluate">
			<template v-if="pj_num">
			<!-- 头部 -->
			<div class="evaluate-top">
				<p><label>评价</label><span>({{pj_num}})</span></p>
				<p><b>查看更多</b><i class="iconfont icon-jiantouyou"></i></p>
			</div>
			</template>
			<template v-if="!pj_num">
				<!-- 头部 -->
					<div class="evaluate-top">
						<p><label>暂无评价</label></p>
					</div>
			</template>
				<!-- 评论 -->
				<div class="evaluate-txt swiper">
					<div class="eva-contxt swiper-wrapper">
						<div class="evaluate-txt-box swiper-slide" v-for="(item,index) in lineContentList" :key='index'>
							<div class="evaluate-txt-left">
								<div class="evaluate-txt-left-top">
									<img :src="item.avatar" />
									<label>{{item.username}}</label>
								</div>
								<div class="evaluate-txt-left-contxt">
									<label>{{filterTime(item.addtime)}}</label>
								</div>
								<div class="evaluate-txt-left-bottom">
									<label>{{item.comment}}</label>
								</div>
								<div class="evaluate-txt-left-high">
									<img src="../../../../public/img/infoimg/youzhidianping.png" />
								</div>
							</div>
							<div class="evaluate-txt-right">
								<img :src='item.img' />
							</div>
						</div>
					</div>
				</div>
		</div>
		<Bottom></Bottom>
		<!-- 咨询 -->
		<div class="consulting">
			<template v-if="commentList.length>0">
			<!-- 头部 -->
			<div class="consulting-top">
				<p><label>咨询</label><span>({{zx_num}}问)</span></p>
				<p><b>查看更多</b><i class="iconfont icon-jiantouyou"></i></p>
			</div>
			<!-- 咨询区 -->
				<div class="Consulting_area" v-for="(item,index) in commentList" :key='index'>
					<p>问</p><label>{{item.content}}</label>
				</div>
			</template>
			<template v-else>
				<div class="consulting-top">
					<p><label>暂无咨询</label></p>
					<p><b>去咨询</b><i class="iconfont icon-jiantouyou"></i></p>
				</div>
			</template>
		</div>
		<Bottom></Bottom>
		<!-- 供应商信息 -->
		<div class="consulting">
			<!-- 头部 -->
			<div class="consulting-top">
				<p><label>供应商信息</label></p>
				<p><b>查看供应商资质</b><i class="iconfont icon-jiantouyou"></i></p>
			</div>
			<!-- 供应商信息区 -->
			<div class="consulting-txt">
				<p>{{companyName}}</p>
			</div>
		</div>
		<Bottom></Bottom>
		<!-- 行程概览 -->
		<div class="evaluate-trip ">
			<div class="evaluate-trip-top">
				<p>行程概览</p>
			</div>
			<div class="evaluate-trip-contxt">
				<p>
					<img src="../../../../public/img/infoimg/days.png" />
					<label>天数：<em>{{days}}</em></label>
				</p>
				<p>
					<img src="../../../../public/img/infoimg/startPlace.png" />
					<label>出发：<em>{{startPlace}}</em></label>
				</p>
				<p>
					<img src="../../../../public/img/infoimg/endPlace.png" />
					<label>集合：<em>{{endPlace}}</em></label>
				</p>
				<p>
					<img src="../../../../public/img/infoimg/jiesanPlace.png" />
					<label>解散：<em>{{jiesanPlace}}</em></label>
				</p>
			</div>
			<div class="evaluate-trip-bottom">
				<label>点击快速查看 活动说明、集合时间、报名咨询、出团通知</label>
				<i class="iconfont icon-jiantouyou"></i>
			</div>
		</div>
		<Bottom></Bottom>
	</div>
</template>

<script>
	import Bottom from './Bottom.vue'
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'Evaluate',
		data(){
			return{
				lineContentList:[],//评论
				pj_num:'',//评论人数
				commentList:[],//咨询问题
				zx_num:'',//咨询人数
				days:'',//天数
				startPlace:'',//出发地
				endPlace:'',//集合地
				jiesanPlace:'',//解散地
				companyName:''//公司
			}
		},
		components:{
			Bottom
		},
		setup(){
			onMounted(()=>{
				new Swiper('.evaluate-txt',{
					observer:true,
					observeParents:true,
					slidesPerView : 'auto',
					
				})
			})
		},
		created() {
			let id = this.$route.query.pid
			this.axios.get('https://m.youxiake.com/api/m/product/detail?pid='+id).then((res)=>{
				let data = res.data.data;
				this.lineContentList=data.comment.lineContentList//评论
				this.pj_num=data.comment.pj_num//评论人数
				this.commentList=data.discuss.commentList//咨询问题
				this.zx_num=data.discuss.num//咨询人数
				this.companyName=data.product.companyName//公司
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('https://m.youxiake.com/api/m/product/lines/detail?pid='+id).then((res)=>{
				let data = res.data.data
				this.days=data.days//天数
				this.startPlace=data.startPlace//出发地
				this.endPlace=data.endPlace//集合地
				this.jiesanPlace=data.jiesanPlace//解散地
			}).catch((error)=>{
				console.log(error);
			})
		},
		computed:{
			filterTime(){
				return (t)=>{
					let d = t*1000
					let data = new Date(d);
					return data.getFullYear()+'-'+data.getMonth()+'-'+data.getDate()
				}
			}
		}
	}
</script>

<style scoped>
	.evaluate{
		width: 100%;
	}
	.product-evaluate{
		width: 95%;
		margin: 0 auto;
		padding-bottom: 0.3rem;
	}
	.product-evaluate .evaluate-top{
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1rem;
	}
	.product-evaluate .evaluate-txt{
		width: 100%;
	}
	.product-evaluate .evaluate-txt-box{
		position: relative;
		width: 70%;
		display: flex;
		justify-content: space-between;
		border: 1px solid #c6c6c6;
		border-radius: 0.2rem;
		height: 3.5rem;
		float: left;
		margin-right: 0.2rem;
		overflow: hidden;
	}
	.evaluate-txt .evaluate-txt-left{
		width: 50%;
	}
	.evaluate-txt-left .evaluate-txt-left-top{
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		line-height: 0.8rem;
	}
	.evaluate-txt-left-top img{
		width: 0.5rem;
		height: 0.46rem;
		border-radius: 0.5rem;
		margin-right: 0.2rem;
	}
	.evaluate-txt .evaluate-txt-right{
		width: 50%;
	}
	.evaluate-txt .evaluate-txt-right img{
		width: 100%;
		height: 100%;
	}
	.product-evaluate .evaluate-top p label,.consulting-top p label{
		font-size: 0.45rem;
		font-weight: bold;
		margin-right: 0.3rem;
	}
	.product-evaluate .evaluate-top p span,.consulting-top p span{
		font-size: 0.38rem;
		font-weight: bold;
	}
	.product-evaluate .evaluate-top p b,.product-evaluate .evaluate-top p i{
		color: #ff7100;
		font-size: 0.2rem;
	}
	.evaluate-txt-left-high{
		position: absolute;
		top: 25%;
		left: 35%;
	}
	.evaluate-txt-left-high img{
		width: 0.9rem;
	}
	.evaluate-txt-left-contxt{
		line-height: 0.5rem;
		width: 90%;
		margin: 0 auto;
		color: #969696;
	}
	.evaluate-txt-left-bottom{
		width: 90%;
		margin: 0 auto 0.2rem;
	}
	.evaluate-txt-left-bottom label{
		line-height: 0.5rem;
		overflow: hidden;
		display: -webkit-box; /* 转为盒子 */
		-webkit-line-clamp: 4;/* 与高度有关 */
		/* 超出盒子的范围用省略号代替 */
		-webkit-box-orient: vertical;
	}
	.consulting{
		width: 95%;
		margin: 0 auto;
		padding-bottom: 0.3rem;
	}
	.consulting-top{
		margin: 0 auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1rem;
	}
	.consulting .consulting-top p b,.consulting .consulting-top p i{
		color: #ff7100;
		font-size: 0.2rem;
	}
	.Consulting_area{
		width: 100%;
		line-height: 0.6rem;
		display: flex;
	}
	.Consulting_area p{
		width: 6%;
		color: #ff7100;
	}
	.consulting-txt{
		display: -webkit-box;
		overflow: hidden;
		white-space: nowrap;
		font-size: 0.3rem;
	}
	/* 行程 */
	.evaluate-trip{
		width: 95%;
		margin: 0 auto;
		margin-bottom: 0.5rem;
	}
	.evaluate-trip .evaluate-trip-top{
		width: 100%;
		line-height: 1rem;
	}
	.evaluate-trip .evaluate-trip-top p{
		font-weight: bold;
		font-size: 0.45rem;
	}
	.evaluate-trip .evaluate-trip-contxt{
		width: 100%;
	}
	.evaluate-trip .evaluate-trip-contxt p{
		display: inline-block;
		display: flex;
		line-height: 0.7rem;
		align-items: center;
		color: #8d8d8d;
	}
	.evaluate-trip .evaluate-trip-contxt p em{
		color: black;
	}
	.evaluate-trip .evaluate-trip-contxt p img{
		width: 0.35rem;
		height: 0.35rem;
		margin-right: 0.2rem;
	}
	.evaluate-trip-bottom{
		margin-top: 0.5rem;
		padding: 0.3rem 0;
		text-align: center;
		width: 100%;
		border: 1px solid #f1d857;
		background-color: #fffbe5;
	}
	.evaluate-trip-bottom i{
		font-size: 0.1rem;
		margin-left: 0.4rem;
		color: #f1d857;
	}
</style>
